<template>
<div>
    <h2 class="sub-header">编辑学生信息</h2>
    <form @submit.prevent="update">
        <div class="form-group">
            <label for="name">姓名</label>
            <input type="text" required class="form-control" v-model="formData.name" placeholder="姓名">
        </div>
        <div class="form-group">
            <label for="age">年龄</label>
            <input type="number" required class="form-control" v-model="formData.age" placeholder="年龄">
        </div>
        <button type="submit" class="btn btn-default">保存</button>
    </form>
</div>
</template>

<script>
import axios from 'axios'

export default {
	data () {
		return {
            formData : {
                name : '',
                age : ''
            }
        }
	},
    async created () {
        const {id} = this.$route.query
        const {data} = await axios.get(`http://localhost:3000/list/${id}`)
        this.formData = data
    },
    methods : {
        async update () {
            const {data} = await axios.patch(`http://localhost:3000/list/${this.formData.id}`, this.formData)
            this.$router.back()
        }
    }
}
</script>

<style>
	
</style>
